<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>编辑租户信息</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./css/frame/font.css">
		<link rel="stylesheet" href="./css/frame/xadmin.css">
		<link rel="stylesheet" href="./css/page/common.css" />
		<script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="./lib/layui/layui.js"></script>
		<script type="text/javascript" src="./js/frame/xadmin.js"></script>
		<script type="text/javascript" src="./js/constant/urls.js"></script>
		<script type="text/javascript" src="./js/utils/TimeUtils.js"></script>
		<script type="text/javascript" src="./js/utils/UrlUtils.js"></script>
	</head>

	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			<legend>编辑租户信息</legend>
		</fieldset>

		<form class="layui-form" action="">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">租户名</label>
					<div class="layui-input-block">
						<input type="text" name="name" id="name" autocomplete="off" placeholder="请输入租户名" class="layui-input"
						 style="width: 18.75rem;">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">手机号</label>
					<div class="layui-input-block">
						<input type="text" name="phone" id="phone" autocomplete="off" placeholder="请输入手机号"
						 class="layui-input" style="width: 18.75rem;">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">入住时间</label>
					<div class="layui-input-block">
						<input type="text" name="checkInTime" id="checkInTime" placeholder="请选择入住时间"
						 autocomplete="off" class="layui-input" style="width: 18.75rem;">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">押金</label>
					<div class="layui-input-block">
						<input type="text" name="cashPledge" id="cashPledge" autocomplete="off" placeholder="请输入押金"
						 class="layui-input" style="width: 18.75rem;">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">月租金</label>
					<div class="layui-input-block">
						<input type="text" name="monthlyRent" id="monthlyRent" autocomplete="off"
						 placeholder="请输入月租金" class="layui-input" style="width: 18.75rem;">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">余额</label>
					<div class="layui-input-block">
						<input type="text" name="balance" id="balance" autocomplete="off" placeholder="请输入余额"
						 class="layui-input" style="width: 18.75rem;">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">缴费周期</label>
					<div class="layui-input-block">
						<input type="text" name="payCycle" id="payCycle" autocomplete="off" placeholder="请输入缴费周期(月/次)"
						 class="layui-input" style="width: 18.75rem;">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">上次缴费时间</label>
					<div class="layui-input-block">
						<input type="text" name="lastPay" id="lastPay" placeholder="请选择时间" autocomplete="off"
						 class="layui-input" style="width: 18.75rem;">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">小区</label>
					<div class="layui-input-block" style="width: 18.75rem;">
						<select name="regionId" id="region">
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">幢号</label>
					<div class="layui-input-block" style="width: 18.75rem;">
						<select name="buildId" id="build">
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">楼层</label>
					<div class="layui-input-block" style="width: 18.75rem;">
						<select name="floorId" id="floor">
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">门牌号</label>
					<div class="layui-input-block" style="width: 18.75rem;">
						<select name="houseId" id="house">
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item layui-form-text" style="width: 836px;">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<textarea name="description" id="description" placeholder="备注信息" class="layui-textarea"></textarea>
				</div>
			</div>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>上传合同</legend>
			</fieldset>
			<div class="layui-upload" style="margin-left: 30px;">
				<button type="button" class="layui-btn" id="protocolUpload">点击上传合同 (*图片)</button>
				<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
					预览图：
					<div class="layui-upload-list" id="protImgPreview">
					</div>
				</blockquote>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block" style="margin-left: 30px;">
					<button class="layui-btn" lay-submit="" lay-filter="lessee-data">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		<script>
			$(function() {
				function getProtocolImgIds() {
					let imgIds = new Array();
					let imgs = $('#protImgPreview').children('img');
					for (let img of imgs) {
						imgIds.push(img.alt);
					}
					return imgIds;
				}
				selectesReload();
				layui.use(['form', 'layedit', 'laydate', 'upload'], function() {
					var form = layui.form,
						layer = layui.layer,
						laydate = layui.laydate,
						upload = layui.upload;
					//日期
					laydate.render({
						elem: '#checkInTime'
					});
					laydate.render({
						elem: '#lastPay'
					});
					var imgPath = "";
					//多图片上传
					var uploadInst = upload.render({
						elem: '#protocolUpload',
						url: urls.sysUrl + 'protocol/upload',
						multiple: true,
						done: function(res) {
							//上传成功
							if (res.success) {
								$('#protImgPreview').append("<img src='" + urls.imgViewUrl + res.data + "' alt='" + res.data +
									"' width='270' height='300'>")
							}
						},
						error: function() {
							//演示失败状态，并实现重传
							var demoText = $('#demoText');
							demoText.html(
								'<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">点击重试</a>');
							demoText.find('.demo-reload').on('click', function() {
								uploadInst.upload();
							});
						}
					});
					//监听提交
					form.on('submit(lessee-data)', function(data) {
						data.field.protocolIds = getProtocolImgIds();
						data.field.checkInTime = dateToTimestamp(data.field.checkInTime);
						data.field.lastPay = dateToTimestamp(data.field.lastPay);
						var lesseeId = getUrlsId(location.href);
						$.ajax({
							type: "put",
							url: urls.sysUrl + 'lessee/' + lesseeId,
							async: true,
							data: JSON.stringify(data.field),
							contentType: "application/json; charset=utf-8",
							success: function(res) {
								if (res.success) {
									layer.msg(res.description, {
										icon: 6,
										time: 1000
									}, function() {
										//关闭当前frame
										parent.layer.close(parent.layer.getFrameIndex(window.name));
										// 重载表格
										parent.layui.table.reload('testReload',{page:{curr:1}});
									});
								} else {
									layer.msg(res.description, {
										icon: 5,
										time: 1000
									});
								}
							}
						});
						return false;
					});
				});
				// 下拉菜单重载
				function selectesReload() {
					$.ajax({
						type: "get",
						url: urls.sysUrl + 'region/list?pageNo=1&pageSize=999',
						async: false,
						success: function(res) {
							if (res.success) {
								if (res.success) {
									$('#region').html("<option value=''>请选择小区</option>");
									for (let rg of res.data) {
										$('#region').append("<option value='" + rg.id + "'>" + rg.name + "</option>");
									}
								}
							}
						}
					});
					$.ajax({
						type: "get",
						url: urls.sysUrl + 'build/list?pageNo=1&pageSize=999',
						async: false,
						success: function(res) {
							if (res.success) {
								if (res.success) {
									$('#build').html("<option value=''>请选择幢号</option>");
									for (let rg of res.data) {
										$('#build').append("<option value='" + rg.id + "'>" + rg.number + "幢</option>");
									}
								}
							}
						}
					});
					$.ajax({
						type: "get",
						url: urls.sysUrl + 'floor/list?pageNo=1&pageSize=999',
						async: false,
						success: function(res) {
							if (res.success) {
								if (res.success) {
									$('#floor').html("<option value=''>请选择楼层</option>");
									for (let rg of res.data) {
										$('#floor').append("<option value='" + rg.id + "'>" + rg.number + "楼</option>");
									}
								}
							}
						}
					});
					$.ajax({
						type: "get",
						url: urls.sysUrl + 'house/list?pageNo=1&pageSize=999',
						async: false,
						success: function(res) {
							if (res.success) {
								if (res.success) {
									$('#house').html("<option value=''>请选择门牌号</option>");
									for (let rg of res.data) {
										$('#house').append("<option value='" + rg.id + "'>" + rg.number + "</option>");
									}
								}
							}
						}
					});
				}
				// 查询结果数据渲染
				var lesseeId = getUrlsId(location.href);
				$.ajax({
					type: "get",
					url: urls.sysUrl + 'lessee/' + lesseeId,
					async: false,
					success: function(res) {
						if (res.success) {
							$('#name').val(res.data.name);
							$('#phone').val(res.data.phone);
							$('#checkInTime').val(res.data.checkInTime == null ? null : timestampToDate(res.data.checkInTime));
							$('#cashPledge').val(res.data.cashPledge);
							$('#monthlyRent').val(res.data.monthlyRent);
							$('#balance').val(res.data.balance);
							$('#payCycle').val(res.data.payCycle);
							$('#description').val(res.data.description);
							$('#lastPay').val(res.data.lastPay == null ? null : timestampToDate(res.data.lastPay));
							$('#region option').each(function() {
								if ($(this).val() == res.data.regionId) {
									$(this).attr("selected", true);
								}
							});
							$('#build option').each(function() {
								if ($(this).val() == res.data.buildId) {
									$(this).attr("selected", true);
								}
							});
							$('#floor option').each(function() {
								if ($(this).val() == res.data.floorId) {
									$(this).attr("selected", true);
								}
							});
							$('#house option').each(function() {
								if ($(this).val() == res.data.houseId) {
									$(this).attr("selected", true);
								}
							});
							let protocolIds = res.data.protocolIds;
							for (let ptid of protocolIds) {
								$('#protImgPreview').append("<img src='" + urls.imgViewUrl + ptid + "' alt='" + ptid +
									"' width='270' height='300'>")
							}
						}
					}
				});
			});
		</script>
	</body>

</html>
